---
type: tutorial
title: Füge Styles für die gesamte Website hinzu
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog –
  Erstelle ein globales Stylesheet für siteweite Styles
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du eine gestylte About-Seite hast, ist es an der Zeit, globale Styles für den Rest deiner Website hinzuzufügen!

<PreCheck>
  - Styles global anzuwenden
</PreCheck>

## Ein globales Stylesheet hinzufügen

Du hast gesehen, dass der Astro-`<style>`-Tag **standardmäßig scoped** ist, was bedeutet, dass er nur die Elemente in seiner eigenen Datei beeinflusst.

Es gibt verschiedene Möglichkeiten, Styles **global** in Astro zu definieren, aber in diesem Tutorial erstellst und importierst du eine Datei `global.css` in jede deiner Seiten. Diese Kombination aus Stylesheet und `<style>`-Tag gibt dir die Möglichkeit, einige Styles siteweit zu kontrollieren und bestimmte Styles genau dort anzuwenden, wo du sie haben möchtest.

<Steps>
1. Erstelle eine neue Datei unter `src/styles/global.css` (du musst zuerst einen Ordner `styles` erstellen).

2. Kopiere den folgenden Code in die neue Datei `global.css`

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. Füge in `about.astro` die folgende Import-Anweisung in dein Frontmatter ein: 

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "Über mich";

    const identity = {
      firstName: "Sarah",
      country: "Kanada",
      occupation: "Technische Redakteurin",
      hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "crimson";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. Überprüfe die Browser-Vorschau deiner About-Seite, und du solltest nun die neuen Styles sehen!
</Steps>

<Box icon="puzzle-piece">

## Probiere es selbst – Importiere dein globales Stylesheet

Füge in jeder `.astro`-Datei deines Projekts die nötige Zeile ein, damit die globalen Styles auf allen Seiten angewendet werden.

<details>
<summary>✅ Zeige mir den Code! ✅</summary>

Füge die folgende Import-Anweisung in die beiden anderen Seiten-Dateien ein: `src/pages/index.astro` und `src/pages/blog.astro`

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

Nimm beliebige Änderungen oder Ergänzungen am Inhalt deiner About-Seite vor, indem du HTML-Elemente in das Seitentemplate einfügst – statisch oder dynamisch. Schreibe zusätzlichen JavaScript-Code in dein Frontmatter-Skript, um Werte für dein HTML bereitzustellen. Wenn die Seite fertig ist, committe deine Änderungen und lade sie auf GitHub hoch, bevor du mit der nächsten Lektion fortfährst.

<Box icon="question-mark">
### Analysiere das Muster

Deine About-Seite wird nun *sowohl* durch die importierte Datei `global.css` *als auch* durch einen `<style>`-Tag gestylt.

- Werden Styles aus beiden Styling-Methoden angewendet? 

    <p>
      <Spoiler>Ja</Spoiler>
    </p>

- Gibt es widersprüchliche Styles und wenn ja, welche werden angewendet?

    <p>
      <Spoiler>Ja, `<h1>` hat global eine Größe von `2.5rem`, lokal im `<style>`-Tag jedoch `4rem`. Die lokale `4rem`-Regel wird auf der About-Seite angewendet.</Spoiler>
    </p>

- Beschreibe, wie `global.css` und `<style>` zusammenarbeiten.

    <p>
      <Spoiler>Wenn widersprüchliche Styles sowohl global als auch im lokalen `<style>`-Tag einer Seite definiert sind, überschreiben die lokalen Styles die globalen. (Es können jedoch andere Faktoren eine Rolle spielen, daher immer visuell prüfen, ob die Styles korrekt angewendet werden!)</Spoiler>
    </p>

- Wie würdest du entscheiden, ob du einen Style in einer `global.css`-Datei oder in einem `<style>`-Tag definierst?

    <p>
      <Spoiler>Wenn ein Style siteweit angewendet werden soll, benutzt man `global.css`. Soll der Style nur für den HTML-Inhalt einer einzelnen `.astro`-Datei gelten, verwendet man einen `<style>`-Tag.</Spoiler>
    </p>

</Box>

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich kann globale CSS-Styles durch das Importieren einer `.css`-Datei hinzufügen.
</Checklist>
</Box>

### Ressourcen

- [Astro Syntax vs. JSX – Vergleich](/de/reference/astro-syntax/#unterschiede-zwischen-astro-und-jsx)

- [Astro `<style>`-Tag](/de/guides/styling/#styling-in-astro)

- [CSS-Variablen in Astro](/de/guides/styling/#css-variables)
